<template>
	<view class="refundOnline">
		<switch-patient :fun="getInfo"></switch-patient>
		<view class="balance">
			<text>卡内余额</text>
			<text class="amount">￥{{ balance }}</text>
		</view>
		<view class="refund">
			<view class="title">
				<text>退款金额</text>
				<text @click="all" class="all">全部</text>
			</view>
			<input type="number" v-model="refundMoney" placeholder-style="color:rgb(215,215,215);"
				placeholder="请输入退款金额" />
		</view>
		<view class="tips">
			<text>
				退款金额将原路返回到您的账户，如需要退款至银行卡或现金，请至1楼大厅窗口办理
			</text>
		</view>
		<view @click="refund" class="submit"><text>确认退款</text></view>
	</view>
</template>

<script setup>
	import SwitchPatient from '@/components/SwitchPatient.vue'
	import {
		returnMoney
	} from '@/api/personApi.js'
	import {
		ref
	} from 'vue'
	import {
		useLoginStore
	} from '@/store/loginStore.js'
	const loginStore = useLoginStore()
	const balance = ref(0)
	const refundMoney = ref()
	let id = 0
	const refund = () => {
		if (!refundMoney.value) {
			uni.showToast({
				title: '请输入正确金额',
				icon: 'error'
			})
			return
		} else if (refundMoney.value > balance.value) {
			uni.showToast({
				title: '请输入正确金额',
				icon: 'error'
			})
			return
		}
		console.log(refundMoney.value, id)
		uni.showModal({
			title: '',
			content: '确定退款至您的账户吗？',
			showCancel: true,
			cancelText: '否',
			confirmText: '是',
			success: async res => {
				if (res.confirm) {
					let {
						data
					} = await returnMoney(id, refundMoney.value)
					if (data.code == 0) {
						uni.showToast({
							title: '退款成功',
							icon: 'success',
							success() {
								uni.switchTab({
									url: '/pages/index/index'
								})
							}
						})

					} else {
						uni.showToast({
							title: '退款失败',
							icon: 'error'
						})
					}
				}
			}
		})
	}
	const getInfo = (v) => {
		balance.value = v.money
		console.log(v.id);
		id = v.id
	}
	const all = () => {
		refundMoney.value = balance.value
	}
</script>

<style scoped lang="less">
	.refundOnline {
		background: #fdfeff;
		padding: 0 30rpx 30rpx 30rpx;

		.balance {
			border: 1px solid #f2f2f2;
			height: 110rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
			font-size: 30rpx;
			color: #555;

			.amount {
				font-size: 34rpx;
				color: #333;
			}
		}

		.refund {
			padding: 40rpx 30rpx;
			height: 250rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			box-sizing: border-box;
			border: 1px solid #f2f2f2;
			margin-top: 30rpx;

			.title {
				display: flex;
				justify-content: space-between;
				font-size: 30rpx;

				.all {
					color: #006eff;
					font-size: 28rpx;
				}
			}

			input {
				background: #f2f2f2;
				font-size: 28rpx;
				height: 100rpx;
				padding: 0 30rpx;
				border-radius: 4px;
			}
		}

		.tips {
			margin-top: 30rpx;
			height: 150rpx;
			background: #f7f8f8;
			font-size: 24rpx;
			color: #aaa;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			border-radius: 4px;
			line-height: 48rpx;
		}

		.submit {
			margin-top: 60rpx;
			background: #006eff;
			color: #fff;
			width: 686rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 4px;
		}
	}
</style>
